<script setup lang="ts">
import ReCol from "@/components/ReCol";
import { useDark, randomGradient } from "@pureadmin/utils";
import { ref } from "vue";
import { barChart, lineChart, roundChart } from "./components/chart";
import PureTable from "./components/table/index.vue";
import { chartData, barChartData, lineChartData } from "./data";

defineOptions({
  name: "Welcome"
});

let curWeek = ref(0);
</script>

<template>
  <div>
    <h1 class="mb-3 max-h-12 my_header font-bold">SGMW制造基地PFMEA状态报表</h1>
    <el-row :gutter="12" justify="space-between">
      <re-col
        v-motion
        :value="6"
        :md="24"
        :sm="24"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{ opacity: 1, y: 0, transition: { delay: 400 } }"
      >
        <el-card>
          <div class="flex justify-between mb-3">
            <span class="text-md font-bold">动力总成整体状态</span>
            <div class="w-45 h-8 flex justify-center items-center rounded-md">
              <el-button>总数</el-button>
              <el-button>累计变更</el-button>
              <el-button>饼图</el-button>
            </div>
          </div>
          <div class="flex justify-between items-center mt-3">
            <barChart :requireData="barChartData.requireData" />
          </div>
        </el-card>
      </re-col>
      <re-col
        v-motion
        class="mb-3"
        :value="12"
        :md="24"
        :sm="24"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{ opacity: 1, y: 0, transition: { delay: 400 } }"
      >
        <el-card>
          <div class="flex justify-between mb-3">
            <span class="text-md font-bold">动力总成TOP5回顾展示</span>
          </div>
          <PureTable />
        </el-card>
      </re-col>
      <re-col
        v-motion
        :value="6"
        :md="24"
        :sm="24"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{ opacity: 1, y: 0, transition: { delay: 400 } }"
      >
        <el-card>
          <div class="flex justify-between mb-3">
            <span class="text-md font-bold">动力总成整体状态</span>
            <div class="w-45 h-8 flex justify-center items-center rounded-md">
              <el-button>总数</el-button>
              <el-button>累计变更</el-button>
              <el-button>饼图</el-button>
            </div>
          </div>
          <div class="flex justify-between items-center mt-3">
            <lineChart :requireData="lineChartData.requireData" />
          </div>
        </el-card>
      </re-col>

      <re-col
        v-motion
        :value="6"
        :md="24"
        :sm="24"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{ opacity: 1, y: 0, transition: { delay: 400 } }"
      >
        <el-card>
          <div class="flex justify-between mb-3">
            <span class="text-md font-bold">动力总成整体状态</span>
            <div class="w-45 h-8 flex justify-center items-center rounded-md">
              <el-button>总数</el-button>
              <el-button>累计变更</el-button>
              <el-button>饼图</el-button>
            </div>
          </div>
          <div class="flex justify-between items-center mt-3">
            <barChart :requireData="barChartData.requireData" />
          </div>
        </el-card>
      </re-col>
      <re-col
        v-motion
        :value="12"
        :md="24"
        :sm="24"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{ opacity: 1, y: 0, transition: { delay: 400 } }"
      >
        <el-card>
          <div class="flex justify-between mb-3">
            <span class="text-md font-bold">动力总成TOP5回顾展示</span>
          </div>
          <PureTable />
        </el-card>
      </re-col>
      <re-col
        v-motion
        :value="6"
        :md="24"
        :sm="24"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{ opacity: 1, y: 0, transition: { delay: 400 } }"
      >
        <el-card>
          <div class="flex justify-between mb-3">
            <span class="text-md font-bold">动力总成整体状态</span>
            <div class="w-45 h-8 flex justify-center items-center rounded-md">
              <el-button>总数</el-button>
              <el-button>累计变更</el-button>
              <el-button>饼图</el-button>
            </div>
          </div>
          <div class="flex justify-between items-center mt-3">
            <roundChart :requireData="barChartData.requireData" />
          </div>
        </el-card>
      </re-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.my_header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  background-color: black;
}
</style>
